<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试订单API</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .debug-info {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            padding: 15px;
            margin: 10px 0;
            border-radius: 4px;
            font-family: monospace;
            font-size: 12px;
        }
        .order-item {
            border: 1px solid #ddd;
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
        }
        .status-badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
        }
        .status-pending { background: #fff3cd; color: #856404; }
        .status-processing { background: #cce5ff; color: #004085; }
        .status-completed { background: #d4edda; color: #155724; }
        .status-cancelled { background: #f8d7da; color: #721c24; }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover { background: #0056b3; }
    </style>
</head>
<body>
    <div class="container">
        <h1>订单API测试工具</h1>
        
        <div>
            <button onclick="testOrderAPI()">测试订单API</button>
            <button onclick="clearResults()">清空结果</button>
        </div>
        
        <div id="results"></div>
    </div>

    <script>
        async function testOrderAPI() {
            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML = '<p>正在测试...</p>';
            
            try {
                // 测试登录
                const loginData = {
                    acount: 'admin',
                    apwd: '123456'
                };
                
                console.log('发送登录请求...');
                const loginResponse = await fetch('http://localhost:8081/api/admins/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(loginData)
                });
                
                const loginResult = await loginResponse.json();
                console.log('登录响应:', loginResult);
                
                let token = loginResult.token || (loginResult.data && loginResult.data.token);
                if (!token && loginResult.status === 200) {
                    token = loginData.acount; // 使用用户名作为临时token
                }
                
                // 测试获取所有订单
                console.log('发送订单查询请求...');
                const orderResponse = await fetch('http://localhost:8081/api/order/findAll', {
                    method: 'GET',
                    headers: {
                        'token': token
                    }
                });
                
                const orderResult = await orderResponse.json();
                console.log('订单API响应:', orderResult);
                
                // 显示结果
                displayResults(loginResult, orderResult);
                
            } catch (error) {
                console.error('API测试失败:', error);
                resultsDiv.innerHTML = `
                    <div class="debug-info" style="background: #f8d7da; color: #721c24;">
                        <strong>错误:</strong> ${error.message}<br>
                        <strong>堆栈:</strong> ${error.stack}
                    </div>
                `;
            }
        }
        
        function displayResults(loginResult, orderResult) {
            const resultsDiv = document.getElementById('results');
            
            let html = `
                <h2>测试结果</h2>
                
                <h3>1. 登录响应</h3>
                <div class="debug-info">
                    <strong>状态:</strong> ${JSON.stringify(loginResult.status || loginResult.state)}<br>
                    <strong>消息:</strong> ${loginResult.message || '无'}<br>
                    <strong>数据:</strong> ${JSON.stringify(loginResult.data, null, 2)}
                </div>
                
                <h3>2. 订单API响应</h3>
                <div class="debug-info">
                    <strong>完整响应:</strong> ${JSON.stringify(orderResult, null, 2)}
                </div>
            `;
            
            if (orderResult.data && Array.isArray(orderResult.data)) {
                const orders = orderResult.data;
                const allStatuses = [...new Set(orders.map(order => order.status))];
                
                html += `
                    <h3>3. 订单数据分析</h3>
                    <div class="debug-info">
                        <strong>总订单数:</strong> ${orders.length}<br>
                        <strong>所有状态值:</strong> ${JSON.stringify(allStatuses)}<br>
                    </div>
                    
                    <h3>4. 待处理订单检查</h3>
                `;
                
                const pendingOrders = orders.filter(order => {
                    const status = order.status;
                    const isPending = status === '待处理' || status === '待发货' || status === 'pending' || status === 'PENDING';
                    return isPending;
                });
                
                html += `
                    <div class="debug-info">
                        <strong>待处理订单数量:</strong> ${pendingOrders.length}<br>
                        <strong>过滤条件:</strong> 状态为 "待处理" 或 "待发货" 或 "pending" 或 "PENDING"
                    </div>
                `;
                
                if (pendingOrders.length > 0) {
                    html += '<h4>待处理订单详情:</h4>';
                    pendingOrders.forEach((order, index) => {
                        html += `
                            <div class="order-item">
                                <strong>订单 ${index + 1}:</strong><br>
                                订单号: ${order.orderNo || order.onumber || '无'}<br>
                                客户: ${order.customer || order.ousername || '无'}<br>
                                状态: <span class="status-badge status-pending">${order.status || '未知'}</span><br>
                                金额: ${order.amount || order.oamount || '0元'}<br>
                                时间: ${order.createTime || order.otime || '无'}<br>
                                分类: ${order.category || '鞋靴'}
                            </div>
                        `;
                    });
                } else {
                    html += `
                        <div class="debug-info" style="background: #fff3cd; color: #856404;">
                            <strong>没有找到待处理订单！</strong><br>
                            请检查订单状态值是否正确。
                        </div>
                        
                        <h4>前5个订单示例:</h4>
                    `;
                    
                    orders.slice(0, 5).forEach((order, index) => {
                        html += `
                            <div class="order-item">
                                <strong>订单 ${index + 1}:</strong><br>
                                订单号: ${order.orderNo || order.onumber || '无'}<br>
                                客户: ${order.customer || order.ousername || '无'}<br>
                                状态: <span class="status-badge">${order.status || '未知'}</span><br>
                                金额: ${order.amount || order.oamount || '0元'}<br>
                                时间: ${order.createTime || order.otime || '无'}<br>
                                分类: ${order.category || '鞋靴'}
                            </div>
                        `;
                    });
                }
            } else {
                html += `
                    <div class="debug-info" style="background: #f8d7da; color: #721c24;">
                        <strong>订单数据格式错误:</strong> 期望 data 为数组，实际为 ${typeof orderResult.data}
                    </div>
                `;
            }
            
            resultsDiv.innerHTML = html;
        }
        
        function clearResults() {
            document.getElementById('results').innerHTML = '';
        }
        
        // 页面加载时自动测试
        window.onload = function() {
            console.log('测试页面加载完成');
        };
    </script>
</body>
</html>